<template>
  <div id="RatioDialog" v-loading="loading">
    <el-dialog v-model="dialogVisible" :title="collegeName1" width="900">
      <div class="title-list" v-loading="loading">
        <div class="title-box df">
          <div
            class="title"
            style="flex: 1"
            v-for="item in dataList.major_subject"
            :key="item.id"
          >
            <div>{{ item.name }}</div>
            <div class="border-top"></div>
            <div style="margin-bottom: 5px">{{ item.count }}</div>
            <div>{{ item.percent }}%</div>
          </div>
        </div>
        <div style="text-align: right; margin: 10px 0; color: #999" class="f12">
          以上单位为专业数量（个）
        </div>
        <div>
          <el-table
            :data="dataList.major_combine"
            style="width: 100%"
            height="350"
          >
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="name" label="选科组合" width="180">
            </el-table-column>
            <el-table-column prop="percent" width="400">
              <template #default="scope">
                <el-progress
                  :text-inside="true"
                  :stroke-width="14"
                  :percentage="scope.row.percent"
                  :color="progressColor"
                  status="success"
                />
              </template>
            </el-table-column>
            <el-table-column prop="count" label="匹配专业" />
            <el-table-column prop="percent" label="匹配率">
              <template #default="scope"> {{ scope.row.percent }}% </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import {
  getSelectSearchSchoolMatch,
  getSelectSearchMajorMatch,
} from '@/api/selectSubject/subject';
const progressColor = computed(() => {
  return [{ color: 'var(--color-text)' }];
});
const collegeName1 = ref('');
const dataList = ref({});
const dialogVisible = ref(false);
const loading = ref(false);
const handleDialogVisible = (queryData, name, type) => {
  // 院校匹配率
  if (type == '1') {
    fetchSelectSearchSchoolMatch(queryData);
  } else {
    fetchSelectSearchMajorMatch(queryData);
  }
  collegeName1.value = name;
  dialogVisible.value = true;
};
const handleIsLoading = (val) => {
  loading.value = val;
};

//院校查看匹配率
const fetchSelectSearchSchoolMatch = (query) => {
  loading.value = true;
  getSelectSearchSchoolMatch(query)
    .then((res) => {
      if (res.data.code == 20000) {
        if (res.data.code == 20000) {
          dataList.value = res.data.data;
          dataList.value.major_subject.sort((a, b) => b.count - a.count);
          loading.value = false;
        }
      }
    })
    .catch(() => {
      loading.value = false;
    });
};

// 专业查看匹配率
const fetchSelectSearchMajorMatch = (query) => {
  loading.value = true;
  getSelectSearchMajorMatch(query)
    .then((res) => {
      if (res.data.code == 20000) {
        dataList.value = res.data.data;
        loading.value = false;
      }
    })
    .catch(() => {
      loading.value = false;
    });
};
defineExpose({
  handleDialogVisible,
  handleIsLoading,
});
</script>

<style lang="scss" scoped>
#RatioDialog {
  .title-list {
    .title-box {
      height: 100px;
    }
    .border-top {
      border-top: 1px solid #ebeef5;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }
}
</style>
